import React from 'react';
import { ButtonIcon } from '@alife/devops-ui';
import { navigate } from 'utils/router';

export default class ActivityMessage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isMsgDescVisible: false,
    };
  }

  // 在组的概览中pathResource不对
  getRepoFullPath = () => {
    const { pathResource } = window.FORCE;
    const { repoUrl } = this.props;
    const fullPath = repoUrl ? repoUrl.replace(`${window.location.origin}/`, '') : '';
    return fullPath || pathResource.fullPath;
  };

  showMultipleSpace = (data) => {
    const idLink = [];
    const resArr =
      Array.isArray(data) &&
      data.length > 0 &&
      data.map((item) => {
        const splitArr = item.split(' ');
        return splitArr.map((v) => {
          if (v.indexOf('#') === -1) return v;
          const urlSplit = v.split('#');
          for (let i = 1; i < urlSplit.length; i += 1) {
            const flag =
              Array.isArray(idLink) &&
              idLink.length > 0 &&
              idLink.find((va) => va.id === urlSplit[i]);
            if (flag && flag.data?.length > 0) {
              urlSplit[i] = (
                <a
                  href={`${window.config.tbHost}/task/${flag.data[0]._id}`}
                  target="_blank"
                  rel="noreferrer"
                  style={{ paddingRight: 5 }}
                >
                  #{urlSplit[i]}
                </a>
              );
            } else {
              urlSplit[i] = <span>#{urlSplit[i]}</span>;
            }
          }
          return urlSplit;
        });
      });
    return resArr[0];
  };

  render() {
    const { commit, i, isShowMore, branchName } = this.props;
    const commitMessageArr = commit[':message'] && commit[':message'].split('\n');
    const [commitMessageTitle, ...commitMessageDesc] = commitMessageArr;

    // 有大量的commit是以一个换行符结尾的，隐刺对仅有一个换行符，且以其结尾的情况做兼容，不认为这种情况应展示 desc
    let hasCommitMessageDesc;
    if (
      commitMessageDesc.length &&
      !(commitMessageDesc.length === 1 && commitMessageDesc[0] === '')
    ) {
      hasCommitMessageDesc = true;
    }
    return (
      <React.Fragment>
        {(i < 2 || isShowMore) && (
          <div className="activity-commits-item">
            <div className="activity-commits-id">
              <a
                className="text-gray-08"
                onClick={() => {
                  navigate(
                    `/${this.getRepoFullPath()}/commit/${commit[':id']}?branch=${branchName}`,
                  );
                }}
              >
                {commit[':id'].slice(0, 8)}
              </a>
              <span className="desc-title-lh"> · </span>
            </div>
            <div className="activity-commits-message">
              <span className="activity-commits-top">
                <span className="activity-commits-title">{commitMessageTitle}</span>
                {hasCommitMessageDesc && (
                  <ButtonIcon
                    name="more-line"
                    size="small"
                    type="secondary"
                    style={{ marginLeft: 8 }}
                    onClick={() => {
                      const { isMsgDescVisible } = this.state;
                      this.setState({
                        isMsgDescVisible: !isMsgDescVisible,
                      });
                    }}
                  />
                )}
              </span>

              {hasCommitMessageDesc && this.state.isMsgDescVisible && (
                <div className="activity-commit-msg-desc">
                  {commitMessageDesc.map((item) => {
                    return (
                      <div className="commit-msg-desc-item">
                        {this.showMultipleSpace([item]).map((va) => {
                          if (va === '') {
                            return <span> &nbsp; </span>;
                          } else {
                            return <span className="branch-more-style">{va}</span>;
                          }
                        })}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
}
